<template>
  <div class="dashboard-container">
    <!-- 顶部数据卡片 -->
    <div class="data-cards">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6" :md="4" :lg="3" v-for="card in dataCards" :key="card.title">
          <el-card shadow="hover" class="stat-card" :body-style="{ padding: '0' }">
            <div class="data-card">
              <div class="card-header" :style="{ background: card.color }">
                <el-icon><component :is="card.icon" /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">{{ card.title }}</div>
                <div class="card-value">{{ card.value }}</div>
                <div class="card-compare" v-if="card.trend !== undefined">
                  较昨日
                  <span :class="card.trend >= 0 ? 'up' : 'down'">
                    {{ Math.abs(card.trend) }}%
                    <el-icon>
                      <CaretTop v-if="card.trend >= 0" />
                      <CaretBottom v-else />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <el-row :gutter="20">
        <!-- 考勤趋势图 -->
        <el-col :span="16">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>考勤趋势分析</span>
                <el-radio-group v-model="timeRange" size="small">
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div ref="trendChartRef" class="chart-content"></div>
          </el-card>
        </el-col>

        <!-- 考勤状态分布 -->
        <el-col :span="8">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>考勤状态分布</span>
              </div>
            </template>
            <div ref="pieChartRef" class="chart-content"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <!-- 部门考勤对比 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>部门考勤对比</span>
              </div>
            </template>
            <div ref="barChartRef" class="chart-content"></div>
          </el-card>
        </el-col>

        <!-- 审批统计 -->
        <el-col :span="12">
          <el-card class="approval-card">
            <template #header>
              <div class="card-header">审批统计</div>
            </template>

            <div class="approval-content">
              <div class="approval-stats">
                <div class="stat-item">
                  <span class="label">待处理请假申请</span>
                  <span class="value">{{ statisticCards[0]?.value || 0 }}条</span>
                </div>
                <div class="stat-item">
                  <span class="label">待处理考勤审批</span>
                  <span class="value">{{ statisticCards[1]?.value || 0 }}条</span>
                </div>
                <div class="stat-item">
                  <span class="label">本月已处理记录</span>
                  <span class="value">{{ statisticCards[2]?.value || 0 }}条</span>
                </div>
                <div class="stat-item">
                  <span class="label">平均审批用时</span>
                  <span class="value">{{ (statisticCards[3]?.value || 0).toFixed(2) }}小时</span>
                </div>
              </div>

              <div ref="approvalChartRef" class="chart approval-chart"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 异常考勤预警 -->
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24">
          <el-card class="warning-card">
            <template #header>
              <div class="card-header">
                <el-tabs v-model="warningActiveTab">
                  <el-tab-pane label="高风险员工" name="highRisk"></el-tab-pane>
                  <el-tab-pane label="异常原因分析" name="abnormalReasons"></el-tab-pane>
                  <el-tab-pane label="异常高发时段" name="abnormalTimePeriods"></el-tab-pane>
                </el-tabs>
              </div>
            </template>

            <div v-if="warningActiveTab === 'highRisk'" class="tab-content">
              <el-table :data="updateHighRiskEmployeesTable()" stripe style="width: 100%">
                <el-table-column prop="employeeName" label="员工姓名" />
                <el-table-column prop="employeeNo" label="员工编号" />
                <el-table-column prop="department" label="所属部门" />
                <el-table-column prop="continuousCount" label="连续异常次数" />
                <el-table-column prop="mainAbnormalType" label="异常类型" />
                <el-table-column prop="riskLevelText" label="风险等级">
                  <template #default="scope">
                    <el-tag
                      :type="
                        scope.row.riskLevel >= 1
                          ? 'danger'
                          : scope.row.riskLevel >= 0.7
                          ? 'warning'
                          : 'info'
                      "
                    >
                      {{ scope.row.riskLevelText }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div v-else-if="warningActiveTab === 'abnormalReasons'" class="chart-container">
              <div ref="warningChartRef" class="chart warning-chart"></div>
            </div>

            <div v-else class="tab-content">
              <el-table :data="warningData.abnormalTimeSlots" stripe style="width: 100%">
                <el-table-column prop="date" label="日期" sortable />
                <el-table-column prop="timeSlot" label="时间段" />
                <el-table-column prop="count" label="异常次数" sortable>
                  <template #default="scope">
                    <el-tag type="warning">{{ scope.row.count }}次</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import * as echarts from 'echarts'
import {
  Calendar,
  User,
  Timer,
  Warning,
  CaretTop,
  CaretBottom,
  Clock,
  Bell,
} from '@element-plus/icons-vue'
import {
  getSummaryData,
  getTrendData,
  getStatusDistribution,
  getDepartmentComparison,
  getApprovalStatistics,
  getWarningData,
} from '@/api/admin/Dashboard'

// 顶部数据卡片数据
const dataCards = ref([])

// 卡片图标和颜色映射
const cardConfig = {
  attendance: { icon: 'User', color: '#0088bc' },
  late: { icon: 'Timer', color: '#4db6e5' },
  leave: { icon: 'Calendar', color: '#00668c' },
  absent: { icon: 'Warning', color: '#F56C6C' },
  earlyLeave: { icon: 'Clock', color: '#4db6e5' },
  abnormal: { icon: 'Bell', color: '#00668c' },
}

// 获取并处理数据卡片数据
const getSummaryDatas = async () => {
  try {
    const res = await getSummaryData()
    if (res.data?.statisticCards) {
      // 处理数据并添加图标和颜色
      dataCards.value = res.data.statisticCards.map((card) => ({
        title: card.title,
        value: card.value.toString() + (card.unit ? card.unit : ''),
        trend: card.changeRate || 0,
        icon: cardConfig[card.type]?.icon || 'Warning',
        color: cardConfig[card.type]?.color || '#909399',
      }))
    }
  } catch (error) {
    console.error('获取数据卡片数据失败:', error)
  }
}

// 图表实例
let trendChart = null
let pieChart = null
let barChart = null
let heatmapChart = null
let approvalChart = null
let warningChart = null

// 时间范围选择
const timeRange = ref('week')

// 图表容器引用
const trendChartRef = ref(null)
const pieChartRef = ref(null)
const barChartRef = ref(null)
const heatmapChartRef = ref(null)
const approvalChartRef = ref(null)
const warningChartRef = ref(null)

// 趋势图数据
const trendData = ref({
  xaxisData: [],
  series: [],
})

// 饼图数据
const pieData = ref({
  series: [],
})

// 柱状图数据
const barData = ref({
  departments: [],
  series: [],
})

// 热力图数据
const heatmapData = ref({
  xaxis: [],
  yaxis: [],
  data: [],
})

// 审批统计数据
const approvalData = ref({
  statisticCards: [],
})

const statisticCards = ref([])

// 异常预警数据
const warningData = ref({
  highRiskEmployees: [],
  abnormalReasons: [],
  abnormalTimeSlots: [],
})

// 异常考勤预警选项卡
const warningActiveTab = ref('highRisk')

// 获取趋势图数据
const getTrendChartData = async () => {
  try {
    const res = await getTrendData(timeRange.value)
    if (res?.data) {
      trendData.value = res.data
      updateTrendChart()
    }
  } catch (error) {
    console.error('获取趋势图数据失败:', error)
  }
}

// 获取饼图数据
const getPieChartData = async () => {
  try {
    const res = await getStatusDistribution()
    if (res?.data) {
      pieData.value = res.data
      updatePieChart()
    }
  } catch (error) {
    console.error('获取考勤状态分布数据失败:', error)
  }
}

// 获取部门对比数据
const getBarChartData = async () => {
  try {
    const res = await getDepartmentComparison()
    if (res?.data) {
      barData.value = res.data
      updateBarChart()
    }
  } catch (error) {
    console.error('获取部门对比数据失败:', error)
  }
}


// 获取审批统计数据
const getApprovalData = async () => {
  try {
    const res = await getApprovalStatistics()
    if (res.data.statisticCards) {
      approvalData.value = {
        statisticCards: res.data.statisticCards.map((card) => ({
          title: card.title,
          value: (card.value ).toFixed(2),
          unit: card.unit,
        })),
      }
      statisticCards.value = res.data.statisticCards
      updateApprovalChart()
    } else {
      approvalData.value = {
        statisticCards: [
          { title: '待处理请假申请', value: 0, unit: '条' },
          { title: '待处理考勤申诉', value: 0, unit: '条' },
          { title: '本月已处理记录', value: 0, unit: '条' },
          { title: '平均审批用时', value: 0, unit: '小时' },
        ],
      }
    }
  } catch (error) {
    console.error('获取审批统计数据失败:', error)
    // 即使出错也要初始化
    approvalData.value = {
      statisticCards: [
        { title: '待处理请假申请', value: 0, unit: '条' },
        { title: '待处理考勤申诉', value: 0, unit: '条' },
        { title: '本月已处理记录', value: 0, unit: '条' },
        { title: '平均审批用时', value: 0, unit: '小时' },
      ],
    }
  }
}

// 获取异常预警数据
const getWarningChartData = async () => {
  try {
    const res = await getWarningData()
    if (res) {
      warningData.value = res.data
      updateWarningChart()
    }
  } catch (error) {
    console.error('获取异常预警数据失败:', error)
  }
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    '正常': '#0088bc',
    '迟到': '#4db6e5',
    '早退': '#4db6e5',
    '缺勤': '#F56C6C',
    '请假': '#00668c',
    '旷工': '#F56C6C',
    '加班': '#0088bc',
    '调休': '#67C23A',
    '未打卡': '#F56C6C',
  }
  return colorMap[status] || '#909399'
}

// 初始化图表实例的通用方法
const initChart = (ref) => {
  if (!ref) return null
  return echarts.init(ref)
}

// 更新趋势图
const updateTrendChart = () => {
  if (!trendChart) return

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {
      data: ['出勤人数', '迟到人数', '请假人数', '缺勤人数'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: trendData.value.xaxisData || [],
      axisLabel: {
        formatter: (value) => {
          return value.slice(5)
        },
      },
    },
    yAxis: {
      type: 'value',
      name: '人数',
      axisLine: {
        show: true,
      },
    },
    series: [
      {
        name: '出勤人数',
        type: 'line',
        smooth: true,
        data: trendData.value.series?.[0]?.data || [],
        itemStyle: {
          color: '#409EFF',
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64,158,255,0.3)' },
            { offset: 1, color: 'rgba(64,158,255,0.1)' },
          ]),
        },
      },
      {
        name: '迟到人数',
        type: 'line',
        smooth: true,
        data: trendData.value.series?.[1]?.data || [],
        itemStyle: {
          color: '#E6A23C',
        },
      },
      {
        name: '请假人数',
        type: 'line',
        smooth: true,
        data: trendData.value.series?.[2]?.data || [],
        itemStyle: {
          color: '#F56C6C',
        },
      },
      {
        name: '缺勤人数',
        type: 'line',
        smooth: true,
        data: trendData.value.series?.[3]?.data || [],
        itemStyle: {
          color: '#909399',
        },
      },
    ],
  }

  trendChart.setOption(option)
}

// 更新饼图
const updatePieChart = () => {
  if (!pieChart) return

  const option = {
    title: {
      text: pieData.value.title || '考勤状态分布',
      left: 'center',
      textStyle: {
        color: '#0088bc',
        fontWeight: 600,
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}人 ({d}%)',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#4db6e5',
      borderWidth: 1,
      textStyle: {
        color: '#606266'
      }
    },
    legend: {
      orient: 'horizontal',
      bottom: '0%',
      left: 'center',
      data: pieData.value.legend || [],
      textStyle: {
        color: '#606266'
      },
      itemGap: 10,
      formatter: (name) => {
        return name.length > 6 ? name.slice(0, 6) + '...' : name
      }
    },
    series: [
      {
        name: '考勤状态',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        },
        label: {
          show: true,
          formatter: '{b}: {c}人',
          color: '#606266'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold',
            color: '#0088bc'
          },
          itemStyle: {
            shadowColor: 'rgba(0, 136, 188, 0.3)',
            shadowBlur: 20
          }
        },
        data: (pieData.value.data || []).map((item) => ({
          ...item,
          itemStyle: {
            color: getStatusColor(item.name),
          },
        })),
      },
    ],
  }
  pieChart.setOption(option)
}

// 更新柱状图
const updateBarChart = () => {
  if (!barChart) return

  const option = {
    title: {
      text: '部门考勤对比',
      left: 'center',
      textStyle: {
        color: '#0088bc',
        fontWeight: 600,
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(0, 136, 188, 0.05)'
        }
      },
      formatter: (params) => {
        let tooltip = `${params[0].name}<br/>`
        params.forEach((item) => {
          tooltip += `${item.seriesName}: ${item.value}人<br/>`
        })
        return tooltip
      },
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#4db6e5',
      borderWidth: 1,
      textStyle: {
        color: '#606266'
      }
    },
    legend: {
      data: barData.value.series?.map((s) => s.name) || [],
      top: 'bottom',
      textStyle: {
        color: '#606266'
      },
      icon: 'roundRect',
      itemGap: 15
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '人数',
      nameTextStyle: {
        color: '#606266'
      },
      axisLine: {
        lineStyle: {
          color: '#E0E6F1'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#606266'
      },
      splitLine: {
        lineStyle: {
          color: '#E0E6F1',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: barData.value.xaxisData || [],
      name: '部门',
      nameTextStyle: {
        color: '#606266'
      },
      axisLine: {
        lineStyle: {
          color: '#E0E6F1'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#606266'
      }
    },
    series: (barData.value.series || []).map((series) => ({
      name: series.name,
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'inside',
        formatter: (params) => {
          return params.value > 0 ? params.value : ''
        },
        color: '#fff',
        textShadowColor: 'rgba(0, 0, 0, 0.3)',
        textShadowBlur: 3
      },
      emphasis: {
        focus: 'series',
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        }
      },
      data: series.data,
      itemStyle: {
        color: getStatusColor(series.name),
        borderRadius: [0, 4, 4, 0]
      }
    })),
  }

  barChart.setOption(option)
}


// 更新审批统计图
const updateApprovalChart = () => {
  if (!approvalChartRef.value) return

  if (!approvalChart) {
    approvalChart = initChart(approvalChartRef.value)
  }

  const displayData = (approvalData.value?.statisticCards || []).filter((item) => item.title !== '')

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}{a}',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#4db6e5',
      borderWidth: 1,
      textStyle: {
        color: '#606266'
      }
    },
    legend: {
      show: true,
      bottom: '0%',
      left: 'center',
      textStyle: {
        color: '#606266'
      },
      icon: 'circle',
      itemGap: 15
    },
    series: [
      {
        name: '条',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: '#fff',
          borderWidth: 2,
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        },
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}\n{c}',
          color: 'white',
          fontWeight: 'bold',
          textShadowColor: 'rgba(0, 0, 0, 0.3)',
          textShadowBlur: 3
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowColor: 'rgba(0, 136, 188, 0.3)',
            shadowBlur: 20
          }
        },
        labelLine: {
          show: false
        },
        color: ['#0088bc', '#67C23A', '#F56C6C'],
        data: displayData.map((item, index) => ({
          name: item.title,
          value: item.value,
          itemStyle: {
            color: index === 0 ? '#0088bc' : index === 1 ? '#4db6e5' : '#00668c'
          }
        }))
      }
    ]
  }

  approvalChart.setOption(option)
}

// 更新异常预警图表
const updateWarningChart = () => {
  const chartDom = warningChartRef.value
  if (!chartDom) return

  const warningChart = echarts.init(chartDom)

  const option = {
    title: {
      text: '异常原因分析',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}人 ({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle',
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: true,
          formatter: '{b}: {c}人',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
          },
        },
        data: (warningData.value.abnormalReasons || []).map((item) => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: getStatusColor(item.name),
          },
        })),
      },
    ],
  }

  warningChart.setOption(option)
}

// 更新高风险员工表格
const updateHighRiskEmployeesTable = () => {
  const highRiskEmployees = warningData.value.highRiskEmployees || []

  // 可以在这里进行额外的数据处理，比如排序、分页等
  return highRiskEmployees.map((employee) => ({
    ...employee,
    riskLevelText:
      employee.riskLevel >= 1 ? '高风险' : employee.riskLevel >= 0.7 ? '中风险' : '低风险',
  }))
}

// 监听时间范围变化
watch(timeRange, () => {
  getTrendChartData()
})

// 监听异常预警选项卡变化
watch(warningActiveTab, () => {
  getWarningChartData()
})

// 初始化趋势图
const initTrendChart = () => {
  trendChart = echarts.init(trendChartRef.value)
  getTrendChartData()
}

// 初始化饼图
const initPieChart = () => {
  pieChart = echarts.init(pieChartRef.value)
  getPieChartData()
}

// 初始化柱状图
const initBarChart = () => {
  barChart = echarts.init(barChartRef.value)
  getBarChartData()
}


// 初始化审批统计图
const initApprovalChart = () => {
  approvalChart = echarts.init(approvalChartRef.value)
  getApprovalData()
}

// 初始化异常预警图表
const initWarningChart = () => {
  getWarningChartData()
}

// 监听窗口大小变化
const handleResize = () => {
  trendChart?.resize()
  pieChart?.resize()
  barChart?.resize()
  approvalChart?.resize()
  warningChart?.resize()
}

onMounted(() => {
  getSummaryDatas()
  initTrendChart()
  initPieChart()
  initBarChart()
  initApprovalChart()
  initWarningChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  trendChart?.dispose()
  pieChart?.dispose()
  barChart?.dispose()
  approvalChart?.dispose()
  warningChart?.dispose()
})
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);

  .data-cards {
    margin-bottom: 30px;

    .stat-card {
      transition: all 0.3s;
      border-radius: 16px;
      overflow: hidden;
      height: 100%;
      border: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 136, 188, 0.15);
      }

      .el-card__body {
        padding: 0;
      }
    }

    .data-card {
      display: flex;
      flex-direction: column;
      height: 100%;

      .card-header {
        padding: 15px 0;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 50px;
          height: 50px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          transform: translate(30%, -30%);
        }

        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 35px;
          height: 35px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          transform: translate(-30%, 30%);
        }

        :deep(.el-icon) {
          font-size: 28px;
          color: #fff;
          filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
          position: relative;
          z-index: 2;
          transition: transform 0.3s ease;
        }
      }

      .card-info {
        flex: 1;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        background: #fff;
        text-align: center;

        .card-title {
          font-size: 14px;
          color: #606266;
          margin-bottom: 10px;
          font-weight: 500;
        }

        .card-value {
          font-size: 24px;
          font-weight: bold;
          color: #0088bc;
          margin-bottom: 10px;
          letter-spacing: -0.5px;
        }

        .card-compare {
          font-size: 12px;
          color: #909399;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;

          .up {
            color: #67c23a;
            display: flex;
            align-items: center;
            gap: 2px;
            font-weight: 500;
          }

          .down {
            color: #f56c6c;
            display: flex;
            align-items: center;
            gap: 2px;
            font-weight: 500;
          }

          :deep(.el-icon) {
            vertical-align: middle;
            font-size: 14px;
          }
        }
      }
    }
  }

  .charts-container {
    .chart-card {
      margin-bottom: 20px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
      
      &:hover {
        box-shadow: 0 8px 20px rgba(0, 136, 188, 0.15);
      }

      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #ebeef5;
        
        span {
          font-size: 16px;
          font-weight: 600;
          color: #0088bc;
        }
        
        :deep(.el-radio-group) {
          .el-radio-button__inner {
            border-color: #0088bc;
            &:hover {
              color: #0088bc;
            }
          }
          .el-radio-button__original-radio:checked + .el-radio-button__inner {
            background-color: #0088bc;
            border-color: #0088bc;
            box-shadow: -1px 0 0 0 #0088bc;
          }
        }
      }

      .chart-content {
        height: 350px;
        width: 100%;
        padding: 10px;
      }
    }
  }

  .chart-container {
    width: 100%;
    height: 350px;
    margin-top: 20px;

    .approval-chart,
    .warning-chart {
      width: 100%;
      height: 100%;
    }
  }

  .warning-card,
  .approval-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 8px 20px rgba(0, 136, 188, 0.15);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 600;
      color: #0088bc;
      
      :deep(.el-tabs__nav-wrap::after) {
        background-color: transparent;
      }
      
      :deep(.el-tabs__active-bar) {
        background-color: #0088bc;
      }
      
      :deep(.el-tabs__item) {
        color: #606266;
        
        &.is-active {
          color: #0088bc;
        }
        
        &:hover {
          color: #4db6e5;
        }
      }
    }

    .tab-content {
      min-height: 300px;
    }

    .approval-content {
      display: flex;
      align-items: center;
      height: 400px;

      .approval-stats {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 20px;

        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: rgba(0, 136, 188, 0.05);
          padding: 18px;
          border-radius: 10px;
          transition: all 0.3s;
          
          &:hover {
            background-color: rgba(0, 136, 188, 0.1);
            transform: translateY(-3px);
          }

          .label {
            color: #606266;
            margin-bottom: 12px;
            font-size: 14px;
          }

          .value {
            font-size: 20px;
            font-weight: bold;
            color: #0088bc;
          }
        }
      }

      .chart {
        width: 40%;
        height: 350px;
        padding: 10px;
      }
    }
  }
}
</style>
